<%--
  Created by IntelliJ IDEA.
  User: 26520
  Date: 2024/11/21
  Time: 13:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>customSystem</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="addcustom" class="big">
    <div class="from">
        <h1 style="text-align: center;color: #9CFE;font-size: 35px;margin-bottom: 40px;margin-top: 40px">添加学生</h1>
        <el-form ref="form" :model="form" :label-position="right" label-width="80px" action="">
            <el-form-item label="姓名">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="学校">
                <el-input v-model="form.company"></el-input>
            </el-form-item>
            <el-form-item label="年级">
                <el-input v-model="form.company"></el-input>
            </el-form-item>
            <el-form-item label="班级">
                <el-input v-model="form.company"></el-input>
            </el-form-item>
            <el-form-item label="类别">
                <el-input v-model="form.role"></el-input>
            </el-form-item>
            <el-form-item label="生日">
                <el-date-picker
                        v-model="form.birthday"
                        type="date"
                        style="width: 100%"
                        placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="性别">
                <el-select style="width: 100%" v-model="form.gender" placeholder="请选择">
                    <el-option
                            v-for="item in genderchange"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="电话">
                <el-input v-model="form.tel"></el-input>
            </el-form-item>
            <p></p>

            <el-button type="primary" @click="add">立即创建</el-button>
            <el-button type="danger" @click="back" style="margin-bottom: 40px">立即返回</el-button>
        </el-form>
    </div>

</div>

</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#addcustom',
        data: function() {
            return {
                form: {
                    name: '',
                    company:"",
                    role:"",
                    birthday:"",
                    gender:"",
                    tel:"",
                },
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                        },
                },
                genderchange: [{
                    value: '男',
                    label: '男'
                }, {
                    value: '女',
                    label: '女'
                }, {
                    value: '其他',
                    label: '其他'
                }],
            }

        },
        methods: {
            checkForm() {
                let allFilled = true;
                for (let key in this.form) {
                    if (!this.form[key] && this.form[key] !== 0) { // 假设0是一个有效的值
                        allFilled = false;
                        break;
                    }
                }
                return allFilled;
            },
            async add() {
                if (!this.checkForm()) {
                    this.$message.error("请填写所有必填字段");
                    return;
                }
                setTimeout(() => {
                    this.$refs.uploadjl.submit();
                }, 500)
                this.$refs.uploadImg.submit();
                setTimeout(() => {
                    if (this.form.birthday instanceof Date) {
                        // 格式化生日日期为 yyyy-mm-dd
                        // this.form.birthday = this.form.birthday ? this.form.birthday.toISOString().split('T')[0] : '';

                        // 获取年、月、日
                        const year = this.form.birthday.getFullYear();
                        const month = (this.form.birthday.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以加1
                        const day = this.form.birthday.getDate().toString().padStart(2, '0');

                        // 格式化生日日期为 yyyy-mm-dd
                        this.form.birthday = year + "-" + month + "-" + day;
                    }

                    // 创建URLSearchParams对象并添加数据
                    const params = new URLSearchParams();
                    params.append('name', this.form.name);
                    params.append('company', this.form.company);
                    params.append('role', this.form.role);
                    params.append('birthday', this.form.birthday);
                    params.append('gender', this.form.gender);
                    params.append('tel', this.form.tel);

                    // 发送POST请求
                    fetch('http://localhost:8090/Spring_MVC_class9_war_exploded/addcustom', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
                        },
                        body: params // URLSearchParams对象会自动转换为URL编码的字符串
                    })
                        .then(response => {
                            if (response.ok) {
                                return response.text(); // 或者 response.json() 如果响应是JSON格式
                            }
                            throw new Error('Network response was not ok.');
                        })
                        .then(data => {
                            console.log(data);
                            this.$message.success("数据添加成功！");
                            setTimeout(() => {
                                window.location.href = 'http://localhost:8090/Spring_MVC_class9_war_exploded/customIndex';
                            }, 300); // 1000毫秒等于1秒
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            this.$message.error("数据添加失败！");
                        });
                }, 1000); // 1000毫秒等于1秒
            },
            back(){
                this.$message.warning("请稍等！");
                // 跳转到指定的URL
                // 设置延迟1秒后跳转
                setTimeout(() => {
                    window.location.href = 'http://localhost:8090/Spring_MVC_class9_war_exploded/customIndex';
                }, 300); // 1000毫秒等于1秒
            }
        }
    })
</script>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body {
        background-color: #9CFE;
    }
    .big{
        width: 70%;
        padding-top: 70px;
        text-align: center;
        margin: 0 auto;
    }
    .from{
        width: 70%;
        padding-right: 45px;
        text-align: center;
        margin: 0 auto;
        border: 1px solid #ffffff;
        border-radius: 8px;
        background-color: white;
    }
    .upload{
        display: inline-block;
    }
</style>
</html>
